<template>
  <div>
    <el-dialog title="添加" :visible.sync="addstatus.flag">
      <el-form :model="form">
        <el-form-item label="顶级菜单">
          <el-select
            v-model="form.pid"
            @change="change"
            placeholder="请选择菜单"
            :disabled="forbidden"
          >
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              v-for="item in toplist"
              :label="item.title"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" v-show="form.pid != 0">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" v-show="form.pid == 0">
          <template>
            <icon-picker v-model="form.icon"></icon-picker>
          </template>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <template>
            <el-radio v-model="form.type" :label="1" disabled>目录</el-radio>
            <el-radio v-model="form.type" :label="2" disabled>菜单</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="菜单状态">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addstatus.flag = false">取 消</el-button>
        <el-button type="primary" @click="addmenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["addstatus", "toplist", "editdata", "forbidden"],
  data() {
    return {
      form: {
        title: "",
        url: "",
        type: 1,
        status: 1,
        icon: "",
        pid: 0,
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    addstatus: {
      deep: true,
      handler: function  (newval, oval){
        if (newval.flag == false) {
          this.form = {
            title: "",
            url: "",
            type: 1,
            status: 1,
            icon: "",
            pid: 0,
          };
        }
      },
    },
  },
  methods: {
    change(val) {
      // 选择顶级菜单
      this.form.pid = val;
      if (val == 0) {
        delete this.form.url;
        this.form.title = "";
        this.form.type = 1;
      } else {
        delete this.form.icon;
        this.form.type = 2;
        this.form.title = "";
      }
    },
    //添加&编辑 确认
    addmenu() {
      // if (this.form.id) {
      //   // 编辑逻辑
      //   this.$api
      //     .postmenuedit(this.form)
      //     .then((res) => {})
      //     .catch((err) => console.log(err));
      // } else {
      // 添加逻辑
      //   this.$api
      //     .postmenuadd(this.form)
      //     .then((res) => {
      //       console.log(res);
      //     })
      //     .catch((err) => console.log(err));
      // }
      this.addstatus.flag = false;
      (this.form.id
        ? this.$api.postmenuedit(this.form)
        : this.$api.postmenuadd(this.form)
      )
        .then((res) => {
          this.$message({
            message: "恭喜操作成功",
            type: "success",
          });
          this.$emit("updataPages");
        })
        .catch((err) => {
          this.$message.error("错误");
          this.$emit("updataPages");
        });
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
</style>
